Flask with Plotly and Pandas Part 2

In this section, you'll see how to create a Plotly visualization on the back end and then send the information to the front end for rendering.

Summary Part 2

In the second part, a Plotly visualization was set up on the back-end inside the routes.py file using Plotly's Python library. The Python plotly code is a dictionary of dictionaries. The Python dictionary is then converted to a JSON format and sent to the front-end via the render_templates method.

Simultaneously a list of ids are created for the plots. This information is also sent to the front-end using the render_template() method.

On the front-end, the ids and visualization code (JSON code) is then used with the Plotly javascript library to render the plots.

In summary:

1. Python is used to set up a Plotly visualization
2. An id is created associated with each visualization
3. The Python Plotly code is converted to JSON
4. The ids and JSON are sent to the front end (index.html).
5. The front end then uses the ids, JSON, and JavaScript Plotly library to render the plots.

JavaScript or Python

You could actually do all of this with only JavaScript. You would read the data, wrangle the data, and then create the plots all using JavaScript; however, to do all of this in JavaScript, you'd need to learn more about JavaScript programming. Instead, you can use the pandas and Python skills you already have to wrangle data on the back-end.